<script setup  lang="ts">
import axios from 'axios';
import type { FormRules } from "element-plus"
import { loginApi } from "../login/apis"
import { askQuestionApi, getHistoryQuestionListApi } from "@/api"
import sentButton from '@@/assets/images/layouts/shangchuan3.png';
import fileUpload from '@@/assets/images/layouts/fileupload3.png';
import Header from "@@/components/Head/index.vue"
import Footer from "@@/components/footer/index.vue"
import aiYaoSuKa1 from '@@/assets/images/layouts/ai-word1.png';
import aiYaoSuKa11 from '@@/assets/images/layouts/ai-word-red.png';
import aiYaoSuKa2 from '@@/assets/images/layouts/ai-word2.png';
import aiYaoSuKa21 from '@@/assets/images/layouts/ai-word21.png';
import aiYaoSuKa3 from '@@/assets/images/layouts/ai-word3.png';
import aiYaoSuKa31 from '@@/assets/images/layouts/ai-word31.png';
import excelFile from '@@/assets/images/layouts/excelfile.png';
import wordFile from '@@/assets/images/layouts/wordfile.png';
import pdfFile from '@@/assets/images/layouts/pdffile.png';
import aiYaoSuKaGreen from '@@/assets/images/layouts/zuoce-green-32.png';
import aiYaoSuKaGray from '@@/assets/images/layouts/zuoce-gray-32.png';
import goToBottom from "@@/assets/images/layouts/go_to_bottom.png";
import tu1 from '@@/assets/images/layouts/tu1.png';
import close from '@@/assets/images/layouts/close.png';
import aiMenu2Active from '@@/assets/images/layouts/ai-menu2.png';
import { useUserStore } from "@/pinia/stores/user.js"
import { onBeforeMount, onMounted, ref } from "vue"
import {LoginRequestData} from "@/pages/login/apis/type";
import { removeToken } from "@@/utils/cache/cookies";
const buttonRef = ref()
const buttonRef2 = ref()
const buttonRef3 = ref()
const buttonRef4 = ref()
const buttonRef5 = ref()
const userStore = useUserStore()
const askTitle = ref("问题显示在这里")
const dialogVisible = ref(false)
const route = useRoute()
const router = useRouter()
const checked = ref(true)
const token = ref("")
const userId = ref(0)
const imageUrl = ref([]) // 提问上传图片，暂时用单张图片。
const imageFileName = ref([]) // 提问上传图片，暂时用单张图片。
const list = ref([]) // 10条AI推荐列表数据
const QuestionList = ref([])
const username = ref("")
const askContent = ref("")
const fromType = ref("")
const left1Class = ref("text1")  // 默认便签css样式，政策，资讯，文献，课件，其他
const left2Class = ref("text1")  // 默认便签css样式，政策，资讯，文献，课件，其他
const left3Class = ref("text1")  // 默认便签css样式，政策，资讯，文献，课件，其他
const uploadReferenceFile = ref(null)
const selectedFile = ref(null); // 上传图片/文档，提问
/** 登录按钮 Loading */
const loading = ref(false)
const scrollContainer = ref(null);
const go_to_bottom_show = ref(true)
/** 登录表单校验规则 */
const loginFormRules: FormRules = {
  account: [
    { required: true, message: "请输入用户名/账号", trigger: "blur" }
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, max: 16, message: "长度在 6 到 16 个字符", trigger: "blur" }
  ],
  code: [
  ]
}
/** 登录表单元素的引用 */
const loginFormRef = useTemplateRef("loginFormRef")
/** 登录表单数据 */
const loginFormData: LoginRequestData = reactive({
  username: "",
  account: "",
  password: "",
  mobile: "",
  code: ""
})
onBeforeMount(() => {
  // 组件已完成响应式状态设置，但未创建DOM节点
  username.value = userStore.getUserName().value
  userId.value = userStore.getUserId().value
  token.value = userStore.token
  if (token.value === '') {
    dialogVisible.value = true
  }
  getAskQuestionList()


})
onMounted(() => {
  // console.log(route.params.id)
  fromType.value = route.query.type // 从资讯页面跳转过来的做判断，显示头部标签，政策 资讯 文献 数据 课件 其他展示激活
  if (fromType.value == "news" ) {
    left1Class.value = "text1"
    left2Class.value = "text1 active-red"
    left3Class.value = "text1 active-green"
  } else {
    left1Class.value = "text1 active-red"
    left2Class.value = "text1"
    left3Class.value = "text1"
  }
  if (route.params.id) {
    askTitle.value = route.params.id
  }
  document.addEventListener('keydown', function(event) {
    if (event.key === "Enter" && event.shiftKey) {
      event.preventDefault(); // 阻止默认行为，例如表单提交
    }

    if (event.key === "Enter" && !event.shiftKey) {
      event.preventDefault(); // 阻止默认行为，例如表单提交
      // askQuestion()
    }
  });
})

const files = ref([]);
/** 登录 */
function handleLogin() {
  loginFormRef.value?.validate((valid) => {
    if (!valid) {
      return
    }
    loginFormData.username = loginFormData.account
    loginFormData.mobile = loginFormData.account
    loading.value = true
    loginApi(loginFormData).then(({ data }) => {
      userStore.setUsername(data.mobile) // token-admin
      userStore.setToken(data.token) // token-admin
      dialogVisible.value = false
    }).catch(() => {
      ElMessage.error({
        message: "验证失败",
        type: "warning",
        duration: 2000
      })
      // loginFormData.password = ""
    }).finally(() => {
      loading.value = false
    })
  })
}
function logout() {
  token.value = ""
  username.value = ""
  removeToken()
  userStore.setToken("") // token-admin
  userStore.setUsername("")
}
function getAskQuestionList () {
  userId.value = userStore.getUserId().value
  const data = {
    page: 1,
    type: 'question',
    limit: 10
  }
  getHistoryQuestionListApi(data).then(({ TableData, code }) => {
    QuestionList.value = TableData
    console.log(TableData)
  }).catch(() => {
  }).finally(() => {})
}
function askQuestion () {
  if (askContent.value === '') {
    ElMessage.error({
      message: "请输入内容",
      type: "warning",
      duration: 2000
    })
  } else {
    askTitle.value = askContent.value
    userId.value = userStore.getUserId().value
    const data2 = {
      user_id: userId.value,
      content: askContent.value
    }
    loading.value = true
    askQuestionApi(data2).then(({ data, code }) => {
      console.log(code)
      askContent.value = ""
      ElMessage.success({
        message: "提交成功",
        duration: 2000
      })
    }).catch(() => {
      ElMessage.error({
        message: "提交失败",
        type: "warning",
        duration: 2000
      })
    }).finally(() => {
      loading.value = false
    })
  }
  console.log(askContent.value)
}
function showPopover () {
  // ref("popoverRef2").show?.()
}
function goToUrl (type) {
  router.push({
    path: type
  })
}
function scrollToBottom () {
  if (scrollContainer.value) {
    scrollContainer.value.scrollTo({
      top: scrollContainer.value.scrollHeight, // 滚动到最底部
      behavior: 'smooth' // 平滑滚动效果（如果需要的话）
    });
  }
}
const handleScroll = () => {
  const scrollTop = scrollContainer.value.scrollTop;
  // console.log(scrollTop)
  if (scrollTop >= 120) {
    go_to_bottom_show.value = false
  } else {
    go_to_bottom_show.value = true
  }
};
function triggerFileInput() {
  uploadReferenceFile.value.click();
}
function handleFileUpload(event) {
  const files = event.target.files[0];
  let isExcelFile = 0;
  let isPdfFile = 0;
  let isWordFile = 0;
  console.log(files)
  // 允许上传的文件类型,word,excel, pdf, ppt, pptx, jpg, png
  if (files.type == 'image/jpeg' || files.type == 'image/png' || files.type == 'image/jpg' ||
    files.type == 'application/pdf' || files.type == 'application/msword'  ||
    files.type == 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' ||  files.type == 'application/vnd.ms-excel'
    || files.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || files.type == 'application/vnd.ms-powerpoint'
    || files.type == 'application/vnd.openxmlformats-officedocument.presentationml.presentation' || files.type == 'application/vnd.ms-powerpoint.presentation.macroEnabled.12' ) {
    if (files && files.type) {
      if (files.type == 'application/vnd.ms-excel') {
        isExcelFile = 1;
      }
      if (files.type == 'application/pdf') {
        isPdfFile = 1;
      }
      if (files.type == 'application/msword' ||  files.type == 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
        isWordFile = 1;
      }
      selectedFile.value = files; // 存储选中的文件，可以在这里做进一步处理，如上传等。
      // console.log(selectedFile.value); // 或者使用FormData发送文件等操作
      const formData = new FormData();
      formData.append('imgFile', selectedFile.value);
      try {
        axios.post('https://www.sacasaca.com/shop122/uploadfile', formData, {
          headers: { 'Content-Type': 'multipart/form-data' },
        }).then(response => {
          response.data
          if(response.data.code == 0) {
            console.log(response.data.data.url)
            if (isExcelFile == 1) {
              imageUrl.value.push(excelFile) ;
            } else if (isPdfFile == 1) {
              imageUrl.value.push(pdfFile) ;
            } else if (isWordFile == 1) {
              imageUrl.value.push(wordFile) ;
            } else {
              imageUrl.value.push(response.data.data.url) ;
            }
            imageFileName.value.push(response.data.data.fileName)
          } else {
            ElMessage.error({
              message: "上传失败",
              type: "warning",
              duration: 2000
            })
          }
        });
      } catch (error) {
        console.error(error);
      }
    } else {
      console.log(files.type)
      ElMessage.error({
        message: "请选择正确的文件类型,允许上传的文件类型,word,excel, pdf, ppt, pptx, jpg, png",
        type: "warning",
        duration: 2000
      })
    }
  }
}

function handleKeyDown(event) {
  if (event.key === 'Enter' && event.shiftKey) {
    // 获取光标位置
    const textarea = event.target;
    const start = textarea.selectionStart;
    const end = textarea.selectionEnd;
    const value = textarea.value;
    const textBeforeCursor = value.substring(0, start);
    const textAfterCursor = value.substring(end);
    console.log('Text before cursor:', textBeforeCursor);
    console.log('Text after cursor:', textAfterCursor);
    console.log(value.substring(end).length);
    if (value.substring(end).length == 0) {
      askContent.value = value.substring(0, start) + '\n';
    } else {
      askContent.value = value.substring(0, start) + '\n' + value.substring(end);
    }
  }
}
const changeCloseState = (id, state) => {
  if (state == 0) {
    document.getElementById("close"  + id).style.display = "none";
    document.getElementById("word"  + id).style.display = "none";
  } else {
    document.getElementById("word"  + id).style.display = "block";
    document.getElementById("close"  + id).style.display = "block";
  }
}
const deletePicture = (id) => {
  console.log(id)
  if (id >= 0) {
    imageUrl.value.splice(id, 1);
  }
  console.log(imageUrl.value)
}
</script>
<template>
  <div class="login-container" style="    height: 100vh;">
    <Header :activeId="1" />

    <div class="ai w-1200" element-loading-text="Loading...">
      <div class="ai-left">
        <div class="ai-left-tool">
          <div class="ai-left-tool-item">
            <div class="icon icon1" style="height: 31px; width: 31px;"  @click="goToUrl('/ai')"/>
            <div class="title" @click="goToUrl('/ai')">
              推荐
            </div>
          </div>
          <div class="ai-left-tool-item">
            <div class="icon icon2" style="height: 30px; width: 30px;"  @click="goToUrl('/ai2')"/>
            <div class="title titleSelected" @click="goToUrl('/ai2')">
              问答
            </div>
          </div>
          <div class="ai-left-tool-item">
            <div class="icon icon3" style="height: 32px; width: 30px;"  @click="goToUrl('/ai3')"/>
            <div class="title " @click="goToUrl('/ai3')">
              学习
            </div>
          </div>
          <div class="ai-left-tool-item">
            <div class="icon icon5" style="height: 30px; width: 30px;" />
            <div class="title">
              专业工具
            </div>
          </div>
          <div class="ai-left-tool-item selected">
            <div class="icon icon6 iconSelected" style="height: 30px; width: 30px;"  @click="goToUrl('/ai4')"/>
            <div class="title " @click="goToUrl('/ai4')">
              记录
            </div>
          </div>
          <div class="ai-left-tool-item">
            <div class="icon icon7" style="height: 30px; width: 30px;"  @click="goToUrl('/ai5')"/>
            <div class="title " @click="goToUrl('/ai5')">
              指南
            </div>
          </div>
        </div>
        <div class="ai-question-left">
          <div class="ai-question-left-item" style="min-height: 2%;"></div>
          <div class="ai-question-left-item"> 综合 </div>
          <div class="ai-question-left-item"> 政策 </div>
          <div class="ai-question-left-item"> 资讯 </div>
          <div class="ai-question-left-item"> 文献 </div>
          <div class="ai-question-left-item"> 数据 </div>
          <div class="ai-question-left-item"> 课件 </div>
          <div class="ai-question-left-item"> 其他 </div>
          <div class="ai-question-left-item" style="min-height: 50%;"></div>
        </div>
      </div>
      <div class="ai-right right-is-record">
        <div class="el-scrollbar" id="messageContainer1">
          <div style="height: calc(100%);width:100%;display: flex;flex-direction: row;">
            <div class="ai-question-right ">
              <div class="scroll"  ref="scrollContainer" @scroll="handleScroll" >
                <div style="width:100%;display: flex; padding: 10px 0; flex-direction: row;  justify-content: flex-end;}">
                  <div class="dot-flashing">
                    <div class="circle"></div>
                    <div class="circle"></div>
                  </div>
                  <div v-if="askTitle.length > 0" style="padding: 6px 10px;height:32px;border-radius: 8px;line-height:22px;font-size: 14px;color: #333333; background-color: rgba(218,216,216,0.68);">{{askTitle}}</div>
                </div>
                <div class="question-content-box">
                  <div class="ysk-box">
                    <div class="top1" style="background-color: #faf6f6;">
                      <div class="left">
                        <div :class="left1Class" >
                          政策
                        </div>
                        <div :class="left2Class">
                          资讯
                        </div>
                        <div>
                          文献
                        </div>
                        <div class="text1">
                          数据
                        </div>
                        <div class="text1">
                          课件
                        </div>
                        <div class="text1">
                          其他
                        </div>
                      </div>
                      <div class="right">
                        <div class="right-item">
                          <div class="imgKa"><img :src="aiYaoSuKa11" class="img1" /></div>
                          <div class="card-text-red2" ref="buttonRef">摘要卡</div>
                        </div>
                        <div class="right-item">
                          <div class="imgKa"><img :src="aiYaoSuKa2" class="img1" /></div>
                          <div class="text2" ref="buttonRef2">应询卡</div>
                        </div>
                        <div class="right-item">
                          <div class="imgKa"><img :src="aiYaoSuKa3" class="img1" /></div>
                          <div class="text2">要素卡</div>
                        </div>
                      </div>
                    </div>

                    <div class="center1">
                      <div class="left">
                        <div class="row1" style="height: 160px;">
                          有什么热门美白成分2？ 有什么热门美白成分？ 有什么热门美白成分？ 有什么热门美白成分？ 有什么热门美白成分？ 有什么热门美白成分？ 有什么热门美白成分？ 有什么热门美白成分？ 有什么热门美白成分？ 有什么热门美白成分？ 有什么热门美白成分？ 有什么热门美白成分？ 有什么热门美白成分？
                        </div>
                        <div class="line10">
                        </div>
                        <div class="row2 text1" style="display: flex;flex-direction: row;">
                          <div>篇数：1</div>
                          <div style="width:1px;height: 12px;margin: 0 14px;background-color: #cbc9c9"></div>
                          <div>关联度区间：0.91-0.85</div>
                          <div style="width: 50px;"></div>
                        </div>
                      </div>
                      <div class="right">
                        <div class="row1-text-red">
                          SACA总括：
                        </div>
                        <div class="row2">
                          <div class="text5">SACA回答：热门美白成分包括烟酰胺、维生素C及其衍生物（如抗坏血酸葡糖苷、3-O-乙基抗坏血酸）、熊果苷、曲酸、苯乙基间苯二酚（377）、光甘草定、白藜芦醇、凝血酸（传明酸）及植物提取物（如甘草提取物、红景天提取物、葡萄籽提取物）。这些成分通过抑制酪氨酸酶活性、还原黑色素或阻断黑素小体转运实现美白，其中377和光甘草定因高效温和成为近年趋势，烟酰胺和维C衍生物则因多效性广受欢迎。</div><!---->
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="ysk-box">
                    <div class="top1" style="background-color: #f5fff6;">
                      <div class="left">
                        <div :class="left1Class" >
                          政策
                        </div>
                        <div :class="left3Class">
                          资讯
                        </div>
                        <div class="text1" >
                          文献
                        </div>
                        <div class="text1">
                          数据
                        </div>
                        <div class="text1">
                          课件
                        </div>
                        <div class="text1">
                          其他
                        </div>
                      </div>
                      <div class="right">
                        <div class="right-item">
                          <div class="imgKa"><img :src="aiYaoSuKa1" class="img1" /></div>
                          <div class="text2" ref="buttonRef4">摘要卡</div>
                        </div>
                        <div class="right-item">
                          <div class="imgKa"><img :src="aiYaoSuKa21" class="img1" /></div>
                          <div class="text-green" @click="showPopover()">应询卡</div>
                        </div>
                        <div class="right-item">
                          <div class="imgKa"><img :src="aiYaoSuKa3" class="img1" /></div>
                          <div class="text2">要素卡</div>
                        </div>
                      </div>
                    </div>
                    <div class="center1">
                      <div class="left">
                        <div class="row0">
                          <div class="lineText1">
                            <div class="lineText10">质量指数：</div>
                            <div class="lineText11">0.85</div>
                          </div>
                          <div class="lineText2">
                            2025.10.10
                          </div>
                        </div>
                        <div class="line"></div>
                        <div class="row1">
                          美白化妆品的综述
                        </div>
                        <div class="line"></div>
                        <div class="row2">
                          <div class="lineText1">
                            <div class="lineText10">这是作者名</div>
                            <div class="line2"></div>
                            <div class="lineText11">经典美妆风尚志社</div>
                          </div>
                          <div class="lineText1">
                            <div class="lineText10">被引用次数：9999次</div>
                            <div class="line2"></div>
                            <div class="lineText11">经典美妆风尚志社</div>
                          </div>
                        </div>
                        <div class="row3">
                          <div class="lineText10"><el-image :src="aiYaoSuKaGreen" class="imgGreen"></el-image> D-Card （要素卡）</div>
                          <div class="lineText11"><el-image :src="aiYaoSuKaGray" class="imgGray"></el-image>F-Card （原文）</div>
                        </div>
                      </div>
                      <div class="right">
                        <div class="row1-text-green">
                          SACA总括：
                        </div>
                        <div class="row2">
                          <div class="text5">SACA回答：当前热门美白成分包括：烟酰胺（抑制黑素转运35%-68%，加速角质更新，推荐浓度3%）、熊果苷（β-型应用最广，抑制酪氨酸酶活性）、苯乙基间苯二酚（377，高效酪氨酸酶抑制剂，活性为曲酸22倍）、维生素C及其衍生物（还原黑色素中间体，抗氧化）、植物提取物如光果甘草定（强效抑制酪氨酸酶）、白藜芦醇（低浓度即优于熊果苷）和红景天苷（抑制酪氨酸酶并减轻紫外线损伤）。这些成分安全高效，广泛用于美白化妆品。</div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 重复应寻卡 -->
                 <div class="ysk-box">
                    <div class="top1" style="background-color: #f5fff6;">
                      <div class="left">
                        <div :class="left1Class">
                          政策
                        </div>
                        <div :class="left3Class">
                          资讯
                        </div>
                        <div class="text1">
                          文献
                        </div>
                        <div class="text1">
                          数据
                        </div>
                        <div class="text1">
                          课件
                        </div>
                        <div class="text1">
                          其他
                        </div>
                      </div>
                      <div class="right">
                         <div class="right-item">
                           <div class="imgKa"><img :src="aiYaoSuKa1" class="img1" /></div>
                           <div class="text2" ref="buttonRef5">摘要卡</div>
                         </div>
                         <div class="right-item">
                           <div class="imgKa"><img :src="aiYaoSuKa21" class="img1" /></div>
                           <div class="text-green" @click="showPopover()">应询卡</div>
                         </div>
                         <div class="right-item">
                           <div class="imgKa"><img :src="aiYaoSuKa3" class="img1" /></div>
                           <div class="text2">要素卡</div>
                         </div>
                      </div>
                    </div>
                    <div class="center1">
                      <div class="left">
                        <div class="row0">
                          <div class="lineText1">
                            <div class="lineText10">质量指数：</div>
                            <div class="lineText11">0.85</div>
                          </div>
                          <div class="lineText2">
                            2025.10.10
                          </div>
                        </div>
                        <div class="line"></div>
                        <div class="row1">
                          美白化妆品的综述
                        </div>
                        <div class="line"></div>
                        <div class="row2">
                          <div class="lineText1">
                            <div class="lineText10">这是作者名</div>
                            <div class="line2"></div>
                            <div class="lineText11">经典美妆风尚志社</div>
                          </div>
                          <div class="lineText1">
                            <div class="lineText10">被引用次数：9999次</div>
                            <div class="line2"></div>
                            <div class="lineText11">经典美妆风尚志社</div>
                          </div>
                        </div>
                        <div class="row3">
                          <div class="lineText10"><el-image :src="aiYaoSuKaGreen" class="imgGreen"></el-image> D-Card （要素卡）</div>
                          <div class="lineText11"><el-image :src="aiYaoSuKaGray" class="imgGray"></el-image>F-Card （原文）</div>
                        </div>
                      </div>
                      <div class="right">
                        <div class="row1-text-green">
                          SACA总括：
                        </div>
                        <div class="row2">
                          <div class="text5">SACA回答：当前热门美白成分包括：烟酰胺（抑制黑素转运35%-68%，加速角质更新，推荐浓度3%）、熊果苷（β-型应用最广，抑制酪氨酸酶活性）、苯乙基间苯二酚（377，高效酪氨酸酶抑制剂，活性为曲酸22倍）、维生素C及其衍生物（还原黑色素中间体，抗氧化）、植物提取物如光果甘草定（强效抑制酪氨酸酶）、白藜芦醇（低浓度即优于熊果苷）和红景天苷（抑制酪氨酸酶并减轻紫外线损伤）。这些成分安全高效，广泛用于美白化妆品。</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="question-content-box0">
                <div class="go_to_bottom"  @click="scrollToBottom" v-show="go_to_bottom_show">
                  <el-image :src="goToBottom" style="width:40px;height:40px;" alt="" width="40" height="40"></el-image>
                </div>
              </div>
              <div class="question-content-box2">
                <div class="question-ysk-box" style="width: 892px;height: 100px;">
                  <el-input type="textarea" id="askTextArea" @keydown="handleKeyDown" style="margin: 10px auto; width: 886px;padding: 6px 12px;border: 0;" :rows="3" resize='none'  placeholder="请输入问题，可通过shift+回车换行"  v-model="askContent" class="textarea"></el-input>
                </div>
                <div class="imgbox">
                  <div style="width:400px;display: flex;flex-direction:row;">
                    <div style="width:800px;height:32px;display: flex;flex-direction: row;" v-if="imageUrl.length > 0">
                      <div v-for="(item,index) in imageUrl" style="width:32px;height:32px;margin-right: 8px;position: relative;">
                        <el-image  @mouseout="changeCloseState(index,0)" @mouseover="changeCloseState(index,1)" :src="item" class="img3 cpt" style="width:32px;height:32px;border-radius: 8px;"></el-image>
                        <div @mouseout="changeCloseState(index,0)"  @mouseover="changeCloseState(index,1)" @click="deletePicture(index)" :ref="'close'+index" :id="'close'+index" :style="{ backgroundImage: 'url(' + close + ')', position: 'absolute',top: '-16px', left: '10px', width : '16px', height: '16px', backgroundSize: 'contain',display: 'none' }" ></div>
                        <div @mouseout="changeCloseState(index,0)"  @mouseover="changeCloseState(index,1)" @click="deletePicture(index)" :id="'word'+index" style="position: absolute; top: 32px; left: -10px; min-width : 60px; height: 24px;overflow: hidden;border-radius: 8px ;line-height:14px;font-size: 12px;display: none;background-color: rgba(221,246,246,0.78);padding: 5px 10px; " >{{imageFileName[index]}}</div>
                      </div>
                    </div>
                  </div>
                  <div style="width:200px;height: 100%;"></div>
                  <div style="width:200px;display: flex;gap: 0 10px;justify-content: flex-end;flex-direction: row;">
                    <button @click="triggerFileInput" style="border: 0;background-image: none;border-radius: 0.375rem;background-color: transparent;cursor: pointer;align-items: center;display: flex;">
                      <el-tooltip class="box-item" effect="dark" content="上传附件，最多只能上传8个附件。">
                      <img :src="fileUpload" class="img3 cpt">
                      </el-tooltip>
                    </button>
                    <input ref="uploadReferenceFile" style="display: none;" type="file" @change="handleFileUpload" />
                    <button @click="askQuestion" style="border: 0;background-image: none;border-radius: 0.375rem;background-color: transparent;cursor: pointer;align-items: center;display: flex;">
                      <el-tooltip class="box-item" effect="dark" content="发送">
                        <img :src="sentButton" class="img2 cpt">
                      </el-tooltip>
                    </button>
                  </div>

                </div>
                <div style="width:1px;height:5px;"></div>
              </div>
              <div style="width:100%;height: 32px;line-height: 30px;text-align: center;font-size:12px;color:#a1a0a0">本次会话由AI生成，仅供参考。</div>
            </div>
          </div>
          <div class="el-scrollbar__bar is-horizontal " style="display: none;">
            <div class="el-scrollbar__thumb" style="transform: translateX(0%);" />
          </div>
          <div class="el-scrollbar__bar is-vertical" style="display: none;">
            <div class="el-scrollbar__thumb" style="transform: translateY(0%);" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style src="@/pages/ai/style/index2.css"  scoped></style>
<style lang="scss" scoped>
.ai-question-left {
  width:138px;
  height: calc(100% - 64px);
  background-color: #fcfcfc;
  border-left: 1px solid #d3d3d3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.ai-question-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 922px;
  width: 922px;
  height: calc(100%);
  padding: 0 0;
  overflow-y: hidden;
  overflow-x: hidden;
  .scroll {
    min-width: 922px;
    width: 922px;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
  }
}
.scroll::-webkit-scrollbar {
  width: 0;
  height: 200px;
  -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
  box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
  -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
}
.ai-question-left-item{
  text-align: center;
  height:30px;
  line-height: 50px;
  font-size: 18px;
  font-weight: 500;
}
.ysk-box {
  margin-bottom: 10px;
}
.question-content-box {
  width: 892px;
  padding: 0;
  border-radius: 16px;
  box-sizing: border-box;
  margin-bottom: 10px;
  margin-left: 32px;
}
.question-content-box0 {
  width: 99%;
  margin: 0 auto;
  height: 30px;
}
.question-content-box2 {
  height: 156px;
  background-color: #fff;
  border-radius: 16px;
  width: 892px;
  margin-top: 16px;
  margin-left: 32px;
}
.go_to_bottom {
  border-radius: 16px;
  cursor: pointer;
  position: relative;
  margin: 0 auto;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  color: #ffffff;
  text-align: center;
  padding: 0;
  background-color: #ffffffff;
  z-index: 19;
}

</style>
